<template>
  <div class="content">
<!--     <div>对杉德支付</div> -->
    <div class="cloud-header">
      <h2>入驻商户</h2>
    </div>
    <div class="cloud-body">
<!--       上传图片
      补充信息
      完善资料 -->
      <div class="push-image">
        <div class="push-image-info">图片信息</div>
        <div class="push-upload">
          <p>统一社会信用代码 <span class="push-upload-tips">(不能大于3M,必填)</span></p>
          <div v-font="28" class="push-upload-icon" @click="intClick('social_credit_code_img_url')">
            <i class="h-icon-outbox"></i>
            <input style="display: none;" id="social_credit_code_img_url" name="file" type="file" @change="intUpload($event,'social_credit_code_img_url')">
          </div>
        </div>
        <div class="push-upload">
          <p>身份证正面照 <span class="push-upload-tips"> (不能大于3M,必填)</span></p>
          <div v-font="28" class="push-upload-icon" @click="intClick('id_card_front_img_url')">
            <i class="h-icon-outbox"></i>
            <input style="display: none;" id="id_card_front_img_url" name="file" type="file" @change="intUpload($event,'id_card_front_img_url')">
          </div>
        </div>
        <div class="push-upload">
          <p>身份证反面照 <span class="push-upload-tips"> (不能大于3M,必填)</span></p>
          <div v-font="28" class="push-upload-icon" @click="intClick('id_card_back_img_url')">
            <i class="h-icon-outbox"></i>
            <input style="display: none;" id="id_card_back_img_url" name="file" type="file" @change="intUpload($event,'id_card_back_img_url')">
          </div>
        </div>
        <div class="push-upload">
          <p>工商网截图 <span class="push-upload-tips"> (不能大于3M,必填)</span></p>
          <div v-font="28" class="push-upload-icon" @click="intClick('ic_net_screen_shot_url')">
            <i class="h-icon-outbox"></i>
            <input style="display: none;" id="ic_net_screen_shot_url" name="file" type="file" @change="intUpload($event,'ic_net_screen_shot_url')">
          </div>
        </div>
        <div class="push-upload">
          <p>其他图片 <span class="push-upload-tips"> (不能超过10张，每张不能大于3M）</span></p>
          <div v-font="28" class="push-upload-icon" @click="intClick('other_supply_imgs')">
            <i class="h-icon-outbox"></i>
            <input style="display: none;" id="other_supply_imgs" name="file" type="file" @change="intUpload($event,'other_supply_imgs')">
          </div>
        </div>

      </div>
      <div class="push-image" style="border-top: 0px;">
        <div class="push-image-info">基本类型</div>
        <ul class="push-from">
          <li class="push-from-item">
            <label>商户类型：</label>
            <Select v-model="form.merchant_type"  :datas="shDataList"  :autosize="false"></Select>
          </li>

          <!-- 普通商户 -->
          <div v-if="form.merchant_type =='GENERAL_MERCHANT'">
            <li class="push-from-item">
              <label>是否收支两条线：</label>
              <Select v-model="form.income_expend_line" :datas="bpDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>商户简称：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.merchant_short_name" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item" v-if="form.merchant_type != 'personal'">
              <label>商户营业执照名称：</label>
              <input type="text" v-model="form.merchant_full_name" ></input>
               <!-- <span class="push-font-color">若无营业执照上商户名称，请填写“个体户+经营者姓名“，如个体户张三</span> -->
            </li>
            <li class="push-from-item">
              <label>清算方式：</label>
              <Select v-model="form.liquidation_mode" :datas="liquidationDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item push-from-select">
              <label>所在地：</label>
              <Select v-model="form.province_code" :datas="view_data[1]"  :autosize="false" ></Select>
              <Select v-model="form.city_code" :datas="view_data[form.province_code]"  :autosize="false" v-if="form.province_code"></Select>
              <Select v-model="form.area_code" :datas="view_data[form.city_code]"  :autosize="false" v-if="form.city_code && form.province_code"></Select>
            </li>
            <li class="push-from-item">
              <label>详细地址：</label>
              <div class="push-input-mandatory">
                <input type="text" placeholder="如门牌、楼栋号等" v-model="form.address"/><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>企业性质：</label>
              <Select v-model="form.enterprise_nature" :datas="enterpriseDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>执照类型：</label>
              <Select v-model="form.business_license_type" :datas="changeBusiness(form.enterprise_nature)"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>执照编号：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.social_credit_code"/><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>有效期类型：</label>
              <Select v-model="form.license_validity_type" :datas="licenseDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>执照有效起始日期：</label>
              <div class="push-input-mandatory">
                  <DatePicker v-model="form.license_start_date" type="date"></DatePicker>
              </div>
            </li>
            <li class="push-from-item">
              <label>执照有效结束日期：</label>
              <div class="push-input-mandatory">
                  <DatePicker v-model="form.license_end_date" type="date"></DatePicker>
              </div>
            </li>
            <li class="push-from-item">
              <label>营业执照注册地址：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.register_address" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>法人代表姓名：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.legal_person_name" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>法人证件类型：</label>
              <Select v-model="form.legal_person_card_type" :datas="legalDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>证件号码：</label>
              <div class="push-input-mandatory">
                <NumberInput v-model="form.legal_person_card_no" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>法人证件有效期类型：</label>
              <DatePicker v-model="form.legal_person_card_date" type="date"></DatePicker>
            </li>
            <li class="push-from-item">
              <label>证件生效日期：</label>
              <div class="push-input-mandatory">
                <DatePicker v-model="form.start_date" type="date"></DatePicker>
                <!-- <span style="">*</span> -->
              </div>
            </li>
            <li class="push-from-item">
              <label>证件失效日期：</label>
              <div class="push-input-mandatory">
                <DatePicker v-model="form.end_date" type="date"></DatePicker>
                <!-- <span style="">*</span> -->
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.contact_person_name" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人类型：</label>
              <Select v-model="form.contact_person_type" :datas="contactTypeDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>联系方式：</label>
              <div class="push-input-mandatory">
                <NumberInput v-model="form.contact_person_phone"/><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人身份证：</label>
              <div class="push-input-mandatory">
                <NumberInput  v-model="form.contact_person_id_card_no" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>电子邮箱：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.email" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>客服电话：</label>
              <div class="push-input-mandatory">
                <input type="text"  v-model="form.service_tel" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item  push-from-select">
              <label>商户经营类目：</label>
              <Select v-model="view_val.level1" :datas="view['level1']"  :autosize="false" ></Select>
              <Select v-model="view_val.level2" :datas="view['level2']"  :autosize="false" v-if="view_val.level1" ></Select>
              <Select v-model="form.merchant_category_code" :datas="view['level3']"  :autosize="true" v-if="view_val.level1 && view_val.level2"></Select>
            </li>
            <li class="push-from-item">
              <label>商户RSA公钥：</label>
              <textarea type="text" rows=1 v-model="form.merchant_public_key"/>
            </li>
            <li class="push-from-item">
              <label>备注：</label>
              <!-- <textarea type="text" rows=1 v-model="merchant_public_key"/> -->
            </li>
          </div>

          <div v-if="form.merchant_type == 'personal' ">
            <li class="push-from-item">
              <label>是否收支两条线：</label>
              <Select v-model="form.income_expend_line" :datas="bpDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>商户名称：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.merchant_short_name" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>清算方式：</label>
              <Select v-model="form.liquidation_mode" :datas="liquidationDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item push-from-select">
              <label>所在地：</label>
              <Select v-model="form.province_code" :datas="view_data[1]"  :autosize="false" ></Select>
              <Select v-model="form.city_code" :datas="view_data[form.province_code]"  :autosize="false" v-if="form.province_code"></Select>
              <Select v-model="form.area_code" :datas="view_data[form.city_code]"  :autosize="false" v-if="form.city_code && form.province_code"></Select>
            </li>
            <li class="push-from-item">
              <label>详细地址：</label>
              <div class="push-input-mandatory">
                <input type="text" placeholder="如门牌、楼栋号等" v-model="form.address"/><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.contact_person_name" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人类型：</label>
              <Select v-model="form.contact_person_type" :datas="contactTypeDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>联系方式：</label>
              <div class="push-input-mandatory">
                <NumberInput v-model="form.contact_person_phone"/><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>联系人证件类型：</label>
              <Select v-model="contact_certificate_type" :datas="certificateTypeDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>联系人身份证：</label>
              <div class="push-input-mandatory">
                <NumberInput  v-model="form.contact_person_id_card_no" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>有效期类型：</label>
              <Select v-model="form.license_validity_type" :datas="licenseDataList"  :autosize="false"></Select>
            </li>
            <li class="push-from-item">
              <label>证件生效日期：</label>
              <div class="push-input-mandatory">
                <DatePicker v-model="form.start_date" type="date"></DatePicker>
                <!-- <span style="">*</span> -->
              </div>
            </li>
            <li class="push-from-item">
              <label>证件失效日期：</label>
              <div class="push-input-mandatory">
                <DatePicker v-model="form.end_date" type="date"></DatePicker>
                <!-- <span style="">*</span> -->
              </div>
            </li>
            <li class="push-from-item">
              <label>职业：</label>
              <Select v-model="form.contact_person_occupation" :datas="occupationDataList"  :autosize="false" ></Select>
            </li>
             <li class="push-from-item">
              <label>性别：</label>
              <Select v-model="form.contact_person_sex" :datas="sexDataList"  :autosize="false" ></Select>
            </li>         
            <li class="push-from-item">
              <label>国籍：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.contact_person_country" /><span style="">*</span>
              </div>
            </li>
             <li class="push-from-item">
              <label>小微经营类型：</label>
              <Select v-model="form.micro_biz_type" :datas="microTypeDataList"  :autosize="false" ></Select>

            </li> 
            <li class="push-from-item">
              <label>电子邮箱：</label>
              <div class="push-input-mandatory">
                <input type="text" v-model="form.email" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item">
              <label>客服电话：</label>
              <div class="push-input-mandatory">
                <input type="text"  v-model="form.service_tel" /><span style="">*</span>
              </div>
            </li>
            <li class="push-from-item  push-from-select">
              <label>商户经营类目：</label>
              <Select v-model="view_val.level1" :datas="view['level1']"  :autosize="false" ></Select>
              <Select v-model="view_val.level2" :datas="view['level2']"  :autosize="false" v-if="view_val.level1" ></Select>
              <Select v-model="form.merchant_category_code" :datas="view['level3']"  :autosize="true" v-if="view_val.level1 && view_val.level2"   ></Select>
            </li>
            <li class="push-from-item">
              <label>商户RSA公钥：</label>
              <textarea type="text" rows=1 v-model="form.merchant_public_key"/>
            </li>
            <li class="push-from-item">
              <label>备注：</label>
              <!-- <textarea type="text" rows=1 v-model="merchant_public_key"/> -->
            </li>
          </div>
          <div class="clear"></div>
        </ul>
      </div>

      <!-- 销售配置 -->
      <div class="push-image" style="border-top: 0px;">
        <div class="push-image-info">销售配置</div>
        <ul class="push-from">
          <li class="push-from-item">
              <label>销售人员：</label>
              <div class="push-input-mandatory">
                <input type="text"  v-model="form.sales_phone" />
                <!-- <span style="">*</span> -->
              </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>

      <!-- 产品配置 -->
      <div class="push-image" style="border-top: 0px;">
        <div class="push-image-info">产品配置</div>
        <ul class="push-from">
          <li class="push-from-item">
              <label>支付产品编号：</label>
              <div class="push-input-mandatory">
                <div class="h-input h-input-prefix-icon push-search-input">
                  <input type="text" v-model="form.product_code" class="push-search-width" />
                  <i class="h-icon-search" @click="intSerialNumber"></i>
                </div>
                <!-- <input type="text"  v-model="form.sales_phone" /> -->
                <span style="">*</span>
              </div>
          </li>
          <li class="push-from-item">
              <label>支付产品名称：</label>
              <div class="push-input-mandatory">
                <input type="text"  v-model="form.sales_phone" />
                <span style="">*</span>
              </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>

      
      <!-- 进件拓展信息 -->
      <div class="push-image" style="border-top: 0px;">
        <div class="push-image-info">进件拓展信息</div>
        <ul class="push-from push-from-float">
          <li class="push-from-item">
              <label>银行通道：</label>
              <div class="push-input-mandatory">
                <div class="h-input h-input-prefix-icon push-search-input">
                  <input type="text" class="push-search-width" />
                  <i class="h-icon-search" @click="intSerialNumber"></i>
                </div>
                <!-- <input type="text"  v-model="form.sales_phone" /> -->
                <span style="">*</span>
              </div>
          </li>

          <li class="push-from-item push-from-select">
              <label>支付方式选择：</label>
              <div class="push-input-mandatory">
              <Checkbox style="margin-top: 5px;" v-model="form.pay_way_info.pay_way" :datas="payWayDataList" ></Checkbox>
              </div>
          </li>

          <li class="push-from-item push-from-select">
              <label>支付宝商户经营类目：</label>
              <div class="push-input-mandatory">
                  <Select v-model="ali_val" :datas="ali_list"  :autosize="false" ></Select>
              </div>
          </li>

          <li class="push-from-item push-from-select">
            <label>MCC经营类目：</label>
            <Select v-model="alipay_val.level1" :datas="alipay.level1"  :autosize="false" ></Select>
            <Select v-model="alipay_val.level2" :datas="alipay.level2"  :autosize="false" ></Select>
            <Select v-model="form.pay_way_info.ali_mcc_category_code" :datas="alipay.level3"  :autosize="false"></Select>
          </li>

          <li class="push-from-item push-from-select">
              <label>企业性质：</label>
              <div class="push-input-mandatory">
                  <Select v-model="catetory.level1" :datas="datalist.level1"  :autosize="false" ></Select>
              </div>
          </li>

          <li class="push-from-item push-from-select">
            <label>微信经营类目：</label>
            <Select v-model="catetory.level2" :datas="datalist.level2"  :autosize="false" ></Select>
            <Select v-model="catetory.level3" :datas="datalist.level3"  :autosize="false" ></Select>
            <Select v-model="form.pay_way_info.wechat_category_code" :datas="datalist.level4"  :autosize="false"></Select>
          </li>

          <li class="push-from-item push-from-select">
              <label>银联二维码商户经营类目：</label>
              <div class="push-input-mandatory">
                  <Select v-model="ali_val" :datas="ali_list"  :autosize="false" ></Select>
              </div>
          </li>

          <li class="push-from-item push-from-select">
            <label>银联MCC经营类目：</label>
            <Select v-model="alipay_val.level1" :datas="alipay.level1"  :autosize="false" ></Select>
            <Select v-model="alipay_val.level2" :datas="alipay.level2"  :autosize="false" ></Select>
            <Select v-model="form.pay_way_info.union_mcc_category_code" :datas="alipay.level3"  :autosize="false"></Select>
          </li>

          <li class="push-from-item push-from-select">
              <label>杉德宝商户经营类目：</label>
              <div class="push-input-mandatory">
                  <Select v-model="ali_val" :datas="ali_list"  :autosize="false" ></Select>
              </div>
          </li>
          <li class="push-from-item push-from-select">
            <label>杉德宝MCC经营类目：</label>
            <Select v-model="alipay_val.level1" :datas="alipay.level1"  :autosize="false" ></Select>
            <Select v-model="alipay_val.level2" :datas="alipay.level2"  :autosize="false" ></Select>
            <Select v-model="form.pay_way_info.sand_mcc_category_code" :datas="alipay.level3"  :autosize="false"></Select>
          </li>

          <div class="clear"></div>
        </ul>
      </div>


      <!-- 微信信息 -->
      <div class="push-image" style="border-top: 0px;">
        <div class="push-image-info">微信信息</div>
        <ul class="push-from push-wechat-info">
          <li class="push-from-item">
              <label>法人微信号：</label>
              <div class="push-input-mandatory">
                <input type="text" class="push-search-width" />
                <span style="">*</span>
              </div>
          </li>

          <li class="push-from-item">
              <label>法人微信号：</label>
              <div class="push-input-mandatory">
                <input type="text" class="push-search-width" />
                <span style="">*</span>
              </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
      
      <button class="h-btn h-btn-primary push-submit">保存</button>
    </div>
  </div>
</template>
<script type="text/javascript">
import address from './areaCode.json'
import merchant from './merchant.json'
import wechat from "./wechat.json"
import alipay from "./alipay.json"

import Upload from '@/components/upload.vue';
export default {
  components:{
    Upload,
  },
  data() {
    return {
        // 商户类型 
        shDataList:[
          { title: '普通商户', key: 'GENERAL_MERCHANT'},
          { title: '个人小微商户', key: 'personal' },
        ],

        // 是否支持收支两条线
        bpDataList:[
          { title: '是', key: 'YES'},
          { title: '否', key: 'NO' },
        ],

        // 清算方式
        liquidationDataList:[
          { title:'T+1', key :'T1'},
          { title:'S+0', key :'S0'}
        ],

        // 企业性质
        enterpriseDataList:[
          { title:'股份公司', key:'STOCK_COMPANY' },
          { title:'有限公司', key:'LIMITED_COMPANY' },
          { title:'个体工商户', key:'INDIVIDUAL_BUSINESS' },
          { title:'事业单位', key:'GOVERNMENT_INSTITUTION' },
          { title:'其他组织', key:'OTHER' }
        ],

        // 执照类型
        businessDataList_two:[
          { title:'事业单位法人证书', key:'CERTIFICATE_TYPE_2388'},
          { title:'统一社会信用代码证书', key:'CERTIFICATE_TYPE_2389'},
          { title:'有偿服务许可证（军队医院适用）', key:'CERTIFICATE_TYPE_2390'},
          { title:'医疗机构执业许可证（军队医院适用）', key:'CERTIFICATE_TYPE_2391'},
          { title:'企业营业执照（挂靠企业的党组织适用）', key:'CERTIFICATE_TYPE_2392'},
          { title:'组织机构代码证（政府机关适用）', key:'CERTIFICATE_TYPE_2393'},
          { title:'社会团体法人登记证书', key:'CERTIFICATE_TYPE_2394'},
          { title:'民办非企业单位登记证书', key:'CERTIFICATE_TYPE_2395'},
          { title:'基金会法人登记证书', key:'CERTIFICATE_TYPE_2396'},
          { title:'慈善组织公开募捐资格证书', key:'CERTIFICATE_TYPE_2397'},
          { title:'农民专业合作社法人营业执照', key:'CERTIFICATE_TYPE_2398'},
          { title:'宗教活动场所登记证', key:'CERTIFICATE_TYPE_2399'},
          { title:'其他证书/批文/证明', key:'CERTIFICATE_TYPE_2400'},
        ],
        businessDataList_one:[
          { title:'营业执照', key:'NATIONAL_LEGAL'},
          { title:'统一社会信用代码', key:'NATIONAL_LEGAL_MERGE'}
        ],

        //执照有效期
        licenseDataList:[
          { title:'长期', key:'LONG_DATE'},
          { title:'选择日期', key:'CHOOSE_DATE'}
        ],

        //法人证件类型
        legalDataList:[
          { title:'身份证', key:1 },
          { title:'护照', key:2 },
          { title:'港澳居民来往内地通行证', key:3 },
          { title:'台湾居民来往内地通行证', key:4 },
          { title:'其它', key:5 },
        ],

        // 联系人类型
        contactTypeDataList:[
          { title:'法人代表', key:'LEGAL_PERSON'},
          { title:'控制人', key:'CONTROLLER'},
          { title:'代理人', key:'AGENT'},
          { title:'其他', key:'OTHER'},
        ],


        // 小微经营类型
        microTypeDataList:[
          { title:'门店场所', key:'MICRO_TYPE_STORE'},
          { title:'流动经营/便民服务', key:'MICRO_TYPE_MOBILE'},
          { title:'线上商品/服务交易', key:'MICRO_TYPE_ONLINE'},
        ],

        // 联系人职业
        occupationDataList:[
          { title:'自由职业者' , key:'FREELANCER'}
        ],

        // 联系人性别
        sexDataList:[
          { title:'男' , key:'MALE'},
          { title:'女' , key:'FEMALE'}
        ],

        //联系人证件类型
        contact_certificate_type:'ID',
        certificateTypeDataList:[
          { title:'身份证', key:'ID'}
        ],

        // 支付方式列表
        payWayDataList:[
          { title: '微信', key: 'WEIXIN' }, 
          { title: '支付宝', key: 'ALIPAY' }, 
          { title: '银联支付', key: 'UNION_PAY' },
          { title: '杉德宝', key: 'SANDBAO' },
        ],

        form:{
          external_id:'',                         // 服务商的商户编号 （必须唯一）
          merchant_type:'GENERAL_MERCHANT',                       // 商户类型
          income_expend_line:'',                  // 是否支持收支两条线
          merchant_short_name:'',                 // 商户简称
          merchant_full_name:'',                  // 商户营业执照名称
          liquidation_mode:'',                    // 清算方式
          province_code:'',                       // 省代码
          city_code:'',                           // 城市代码
          area_code:'',                           // 区县代码
          address:'',                             // 详细地址
          enterprise_nature:'',                   // 企业性质
          business_license_type:'',               // 执照类型
          social_credit_code:'',                  // 执照编号
          license_validity_type:'',               // 执照有效期
          license_start_date:'',                  // 执照有效起始日期
          license_end_date:'',                    // 执照有效结束日期
          register_address:'',                    // 营业注册地址
          legal_person_name:'',                   // 法人代表姓名
          legal_person_card_type:'',              // 法人证件类型
          legal_person_card_no:'',                // 法人证件号码
          legal_person_card_date:'',              // 法人证件有效期
          start_date:'',                          // 证件生效日期
          end_date:'',                            // 证件失效日期
          contact_person_name:'',                 // 联系人姓名
          contact_person_type:'',                 // 联系人类型
          contact_person_phone:'',                // 联系方式
          contact_person_id_card_no:'',           // 联系人身份证号
          email:'',                               // 电子邮箱
          service_tel:'',                         // 客服电话
          merchant_category_code:'',              // 经营类目



          micro_biz_type:'',                      // 小微经营类型
          contact_person_occupation:'',           // 联系人职业
          contact_person_sex:'',                  // 联系人性别
          contact_person_country:'',              // 国籍


          sales_phone:'',                         // 销售人员

          product_code:'',                        // 支付产品编码


          /**
           * pay_way_info 支付方式详情
           * @pay_way                             支付方式
           * @wechat_category_code                微信经营类目编码
           * @ali_mcc_category_code               微信经营类目编码
           * @union_mcc_category_code             银联MCC经营类目编码
           * @sand_mcc_category_code              杉德宝MCC经营类目编码
           * @type {Object}
           */
          pay_way_info:{
              pay_way:'',
              wechat_category_code:'',
              ali_mcc_category_code:'',
              union_mcc_category_code:'',
              sand_mcc_category_code:'',
          },
        },

        //支付宝类目
        ali_val:'',
        ali_list:[
          { title: '美食', key: 'MEISHI' }, 
          { title: '超市便利店', key: 'CSBLD'},
          { title: '休闲娱乐', key: 'XXYL'},
          { title: '购物', key: 'GW'},
          { title: '爱车', key: 'AC'},
          { title: '生活服务', key: 'SHFW'},
          { title: '教育培训', key: 'JYPX'},
          { title: '医疗健康', key: 'YLJK'},
          { title: '航旅', key: 'HL'},
          { title: '专业销售/批发', key: 'ZYPF'},
          { title: '政府/社会组织', key: 'ZFSH'},
        ],




        // 地址渲染
        view_data:{
          1:[]
        },

        // 商户经营类目
        view:{
          level1:[],
          level2:[],
          level3:[]
        },
        view_val:{
          level1:'',
          level2:'',
        },


        // 支付，微信经营类目。    银联二维码商户经营类目
        datalist:{
          level1:[],
          level2:[],
          level3:[],
          level4:[],
        },
        catetory:{
          level1:'',
          level2:'',
          level3:'',
        },

        // 支付 MCC经营类目。    银联MCC经营类目
        alipay:{
          level1:[],
          level2:[],
          level3:[],
        },
        alipay_val:{
          level1:'',
          level2:'',
        }
    };
  },
  computed:{
    // datalist(){
    //   return this.dealData();
    // },
  },

  watch:{
    form:{
      handler(val,old){
        if(!val.province_code){
          this.form.city_code = "";
          this.form.area_code = "";
        }else if(!this.form.city_code){
          this.form.area_code = "";
        }    
      },
      deep:true
    },

    // 微信经营类目
    catetory:{
      handler(val,old){
        for(let key in val){
          let num = key.replace(/[^0-9]/ig,"");
          let data = this.intWechat(wechat,val[key],num);
          let before = Number(num) + 1; 
          this.datalist['level'+ before] = data;
        }
      },
      deep:true
    },

    //  商户经营类目
    view_val:{
      handler(val,old){
        for(let key in val){
          let num = key.replace(/[^0-9]/ig,"");
          let data = this.intWechat(merchant,val[key],num);
          let before = Number(num) + 1; 
          this.view['level'+ before] = data;
        }
      },
      deep:true
    },

    // 支付宝MCC经营类目
    alipay_val:{
      handler(val,old){
        console.log('333',val);
        for(let key in val){
          let num = key.replace(/[^0-9]/ig,"");
          let data = this.intWechat(alipay,val[key],num);
          let before = Number(num) + 1; 

          this.alipay['level'+ before] = data;
        }
      },
      deep:true
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    // 数据处理 
    this.intData();

    // 处理经营类目数据
    // this.merchantData();


    // 商户经营类目
    this.view['level1'] = this.dealData(merchant);

    // 支付。 处理微信经营类目
    this.datalist['level1'] = this.dealData(wechat);

    //支付。 处理支付宝MCC经营类目
    this.alipay['level1'] = this.dealData(alipay);

  },
  methods: {
    /**
     * 触发上传事件
     * @param  {[type]} field [description]
     * @return {[type]}       [description]
     */
    intClick(field){
      document.getElementById(field).click();
    },
    /**
     * 上传证件
     * @return {[type]} [description]
     */
    intUpload(event,field){
      console.log('上传图片字段',event);
      let self = this;
      let value = this.value || [];
      let limit = this.limit;
      let upload = event.target.files[0];
      let fd = new FileReader();
      fd.readAsDataURL(upload);
      fd.onload = function (e) {
        let name = upload.name;
        let file = this.result;
        let size = upload.size;
        let type = upload.type;
        self.$cloud.wechat().uploadImg(name, file, size, type).then(res => {
          console.log('上传成功');
        }).catch(error => {
          console.log('上传报错', error);
        });
      };
    },


    /**
     * 微信经营类目处理
     * @data                  // 数据源
     * @parent                // 上一级 值
     * @key                   // 上一级 等级 number
     * @return {[type]} [description]
     */
    intWechat(data,parent,key){
      let array = [];
      let level = Number(key) + 1 ;
      data.forEach(item =>{
         if(item['level'+key] == parent){
            if(item['level'+(level+1)]){
              array.push(item['level'+level])
            }else{
              let obj = {
                title:item['level'+level],
                key:item['id']
              }
              array.push(obj);
            }
         }
      })

      // 去重
      if(Object.prototype.toString.call(array[0]) != '[object Object]'){
        array = [...new Set(array)].filter((item,index) =>{
          return item  && item.trim();
        })
      }

      return array;
    },

    /**
     * 公共方法
     * sourceData 数据源
     * @return {[type]} [description]
     */
    dealData(sourceData){
      let array = sourceData.map((item,index) => {
        return item['level'+1];
      })

      // console.log('aary',array)
      let data = [...new Set(array)].filter((item,index) =>{
        return item  && item.trim();
      })
      return data
    },


    /**
     * 选择商户类型回调
     * @param  {[type]} item [description]
     * @return {[type]}      [description]
     */
    intShType(item){
      this.form['merchant_type'] = item.key
      // console.log('item',item)
    },

    /**
     * 数据处理
     * @return {[type]} [description]
     */
    intData(){
      let obj = {};
      address.map((item,index) =>{
          item['key'] = item.code;
          if(!obj.hasOwnProperty(item.upcode)){
            obj[item.upcode] = [item]
          }else{
            obj[item.upcode].push(item);
          }
      })
      console.log('地址',obj);
      this.view_data = obj;
    },

    /**
     * 通过企业性质切换执照类型
     * @return {[type]} [description]
     */
    changeBusiness(code){
      switch(code){
        case 'GOVERNMENT_INSTITUTION':
        case 'OTHER':
          return this.businessDataList_two;
        default: 
          return this.businessDataList_one;
      }
    },


    /**
     * 选择支付产品编号
     * @return {[type]} [description]
     */
    intSerialNumber(){
      console.log('选择支付产品编号')
    }

  }
};

</script>
<style lang="less" scoped="true">
.clear{
  clear: both;
}
.push-image{
  border:solid 1px #dfdfdf;
  padding:40px;
  position: relative;
  .push-image-info{
    padding: 0 20px;
    background-color: #fff;
    position: absolute;
    top: -10px;
    left: 40px;
  }
  .push-upload{
    border-bottom: dashed 1px #efefef;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .push-upload-tips{
    color: red;
  }
  .push-font-color{
    color:red;
    margin-right: 10px;
  }
  .push-upload-icon{
    border: solid 1px #dfdfdf;
    width:120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .push-from{
    width: 100%;
    .push-from-item{
      width: 30%;
      margin-right: 30px;
      height: 30px;
      margin-bottom: 10px;
      float: left;
      label{
        display: inline-block;
        width: 180px;
        float: left;
        line-height: 32px;
      }
      input,.push-search-input{
        width: calc(100% - 180px);
        height: auto;
      }
      .push-search-width{
        width:100%;
        /*width: calc(100% + 20px);*/
      }
      .h-icon-search{
        cursor: pointer;
      }
      textarea{
        width: calc(100% - 180px);
        float: left;
      }
      .h-datetime{
        width: calc(100% - 180px);
      }
    }
  }
  
  .push-wechat-info{
    .push-from-item{
        float: none !important;
        label{
          width: 140px;
        }
        .push-search-width{
          width: calc(100% - 140px);
        }
    }
  }
  .push-from-select{
      width:calc(60% + 30px) !important; 
      margin-right:50px;
      .h-select{
        width: 120px;
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
      }
  }

  .push-from-float .push-from-select{
     width: 100% !important;
  }


  .push-input-mandatory{
      position: relative;
      span{
        position:absolute;
        right: 5px;
        top: 0px; 
        z-index: 999999;
        color:red
      }
  }
}
.push-submit{
  margin-top:20px;
}
</style>
